<template>
	<scroll-view :scroll-x="true" style="white-space: nowrap;">
		<template v-if="!loading">
			<view class="box" v-for="(item,index) in processes" :key='index'>
				<view>
					<template v-if="index!=0">
						<view class="line " ></view>
					</template>
					<view v-else style="margin-top: -30rpx;"></view>
					<view class="setpItem" @click="clickStep(index)">
						<view class="icon" style="border: none;" v-if="statusClass(item,index)=='info'">
							<view class="icon info">
								{{index+1}}
							</view>
						</view>
						<view class="icon" style="border: none;" v-else-if="statusClass(item,index)=='info2'">
							<view class="icon info2">
								{{index+1}}
							</view>
						</view>
						<view class="icon" style="border: none;" v-else-if="statusClass(item,index)=='info3'">
							<view class="icon info3">
								{{index+1}}
							</view>
						</view>
						<view class="icon" v-else>
							{{index+1}}
						</view>
						<view class="title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="box" v-for="(item,index) in 20" :key='index'>
				<view>
					<view class="line Skeleton" v-if="index>0"></view>
					<view v-else style="margin-top: -30rpx;"></view>
					<view class="setpItem">
						<view class="icon Skeleton">
						</view>
						<view class="title Skeleton" style="width: 60rpx;height: 30rpx;" />
					</view>
				</view>
			</view>
		</template>
	</scroll-view>
</template>

<script>
	export default {
		name: "steps",
		props: ['processes', 'setpIndex', 'loading','propsShow'],
		data() {
			return {
				show:false,
				finishIndex:0,
			};
		},
		mounted() {
				this.show=this.propsShow
				this.finishIndex=this.setpIndex
		},
		watch: {
			loading(){
				this.finishIndex=this.setpIndex
			}
		},
		methods: {
			statusClass(item, index) {
				console.log(this.finishIndex,index,this.setpIndex)
				if(this.show){
					if(index<this.finishIndex)return 'info2'
					if (index < this.setpIndex)return 'info3'
					if (index == this.setpIndex)return 'info'
				}else{
					if (index < this.setpIndex) return 'info2'
				}
			},
			clickStep(index) {
				this.show=true
				this.$emit('clickStep', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: inline-block;

		>view {
			display: flex;
			align-items: center;
		}
	}

	.setpItem {
		flex-direction: column;
		align-items: center;
		display: flex;

		.icon {
			margin: 0 0 5rpx 0;
			width: 22px;
			height: 22px;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16rpx;
			border: 1rpx solid #bbb;
			color: #bbb;
			box-sizing: border-box;
		}

		.title {
			font-size: 24rpx;
			width: 80rpx;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

	}

	.line {
		width: 50rpx;
		height: 1rpx;
		margin: -30rpx 20rpx 0;
		background-color: #bbb;

	}



	.info {
		background-color: #3975c6 !important;
		color: #fff !important;
	}

	.info2 {

		background-color: gray !important;
		color: #fff !important;
	}
	.info3 {
	
		background-color: #e7e7e7 !important;
		color: #000 !important;
	}
</style>